<template>
	<!-- 我的追剧 -->

  <view class="Content">
    <TopBar title="" :right="{name: '编辑',fun: rightClick}"/>

    <view style="padding-top: 30rpx">
      <u-tabs :list="tabList"
              :is-scroll="false"
              :current="current"
              @change="change"
              bg-color="transparent"
              :inactiveStyle="{color: '#686767', fontSize: '30rpx'}"
              :activeStyle="{color: '#2A2A2A', fontWeight: 'bold', fontSize: '36rpx'}"
              lineHeight="0"
      ></u-tabs>
      <view class="watch_list" v-if="list.length > 0">
        <view v-for="(item,index) in list" :key="index" class="watch_item">
          <VideoCard :item="item" class="item"/>
          <view class="hidden_box" v-if="btnBox"></view>
          <u--image :showLoading="true" src="/static/personal/select.png" width="40rpx" height="40rpx" class="select" v-if="btnBox && !item.select" @click="selectClick(item)"></u--image>
          <u--image :showLoading="true" src="/static/personal/seleted.png" width="40rpx" height="40rpx" class="select" v-if="btnBox && item.select" @click="selectClick(item)"></u--image>
        </view>
      </view>
      <view style="margin-top: 200rpx" v-if="list.length === 0">
        <u-empty
            mode="list"
            icon="/static/personal/notData.png"
            textSize="36"
            iconSize="160"
            text="暂无记录"
        >
        </u-empty>
        <view class="btnTv" @click="goTheater">去剧场</view>
      </view>
    </view>

    <view class="btnBox" v-if="btnBox">
      <view class="btn" style="border-right: 2rpx solid #E7E7E7" @click="addSelect">全选</view>
      <view class="btn" @click="delOut = true">删除</view>
    </view>

    <u-modal :show="delOut"
             :title-style="{ color: '#ffffff' }"
             :content-style="{ color: '#ffffff' }"
             cancel-color="#333333"
             :show-cancel-button="true"
             :mask-close-able="true"
             @confirm="del"
             @cancel="delOut = false"
             :closeOnClickOverlay="true"
             confirm-color="#e81f4b"
             content="确定删除吗？"
             confirm-text="确认"
             cancel-text="取消"
             title="提示"
    ></u-modal>
  </view>
</template>

<script>
	import {
		Api
	} from '../../service/api'
  import VideoCard from "../../components/videoCard.vue";
  import TopBar from "../../components/TopBar.vue";
	export default {
    components: {TopBar, VideoCard},
		data() {
			return {
        tabList: [{name: '我的在追'}, {name: '浏览记录'}],
        current: 0,
        pageObj: {
          pageSize: 9,
          pageNum: 0,
          status: 'loading'
        },
				list: [],
        btnBox: false, // 是否显示编辑弹窗
        delOut: false
			}
		},
    onReachBottom() {
      this.getList()
    },
    onLoad(op){
      if(op.current) this.current = Number(op.current)
      this.getList()
    },
		methods: {
      goTheater() {
        uni.switchTab({
          url: '/pages/benefit/index'
        })
      },
      change(e) {
        this.current = e.index;
        this.pageObj.pageNum = 0
        this.pageObj.status = 'loadmore'
        this.list = []
        this.getList()
      },
      async getList() {
        if (this.pageObj.status === 'nomore') return
        this.pageObj.status = 'loading'
        let res
        if (this.current === 0) {
          res = await Api.getFollowTvList({
            pageNo: ++this.pageObj.pageNum,
            pageSize: this.pageObj.pageSize,
          })
        } else {
          res = await Api.getHistoryList({
            pageNo: ++this.pageObj.pageNum,
            pageSize: this.pageObj.pageSize,
          })
        }
        this.list = this.list.concat(res.data.list)
        this.list.map(item => {
          item.select = false
        })
      },
      rightClick() {
        this.btnBox = !this.btnBox
      },
      selectClick(item) {
        item.select = !item.select
        this.list = [...[], ...this.list]
      },
      addSelect() {
        if (this.list.length <= 0) return
        const select = this.list[0].select
        this.list.forEach(item => {
          item.select = !select
        })
        this.list = [...[], ...this.list]
      },
      async del() {
        const data = this.list.filter(item => {
          return item.select
        })
        if (data.length <= 0) {
          uni.showToast({
            title: '请先选择',
            icon: 'none'
          })
          this.btnBox = false
          this.delOut = false
          return
        }

        this.btnBox = false
        this.delOut = false
        uni.showLoading({ mask: true, title: '删除中...'})
        if (this.current === 0) {
          // 追剧
          for (const item of data) {
            await Api.followUserDel(item.id).then(res => {
              this.list.splice(this.list.indexOf(item), 1)
            })
          }
        } else {
          // 浏览记录
          for (const item of data) {
            await Api.historyDel(item.id).then(res => {
              this.list.splice(this.list.indexOf(item), 1)
            })
          }
        }
        uni.hideLoading()
      }
    }
	}
</script>


<style lang="less">

.Content {
  padding: 100rpx 26rpx 0;
}

	.watch_list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
    gap: 18rpx;
		margin: 15rpx 0 0;
		border-radius: 20rpx;

    .watch_item{
      position: relative;

      .item{
        //position: absolute;
        //bottom: 0;
        //left: 0;
      }

      .hidden_box{
        width: 100%;
        height: 298.2rpx;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 24rpx;
        background-color: rgba(0,0,0,0.5);
      }

      .select{
        position: absolute;
        top: 20rpx;
        right: 20rpx;
        z-index: 999;
      }
    }


	}

  .btnTv{
    margin: 50rpx auto 0;
    border-radius: 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150rpx;
    border: 2rpx #E81F4B solid;
    color: #E81F4B;
    font-size: 28rpx;
    height: 50rpx;
  }

  .btnBox{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80rpx;
    color: #000000;
    display: flex;
    border-top: 2rpx solid #E7E7E7;

    .btn{
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

</style>
